<template>
  <div style="line-height: initial;">
    <div style="float: left;margin-right: 10px;">
      <img v-lazy="imageUrl" height="100px" width="100px">
    </div>
    <div class="foucs_text">关注：{{goods.viewcount}}</div>
    <div>
      <h4 class="name_text" @click="OnClick">{{goods.title}}</h4>
      <div v-if="goods.selfvalue">
        <span class="tagline">{{goods.selfvalue}}</span>
      </div>
      <div style="display: inline-block;">
        <div>
          <span v-if="goods.vipprice && goods.isvip" class="vip_panel">
            <span class="vip_text">会员</span>
            <span>
              ¥
              <b style="font-size: 16px;">{{goods.vipprice}}</b>
            </span>
          </span>
          <span class="notice_text">
            ¥
            <span style="font-size: 16px;">
              <b>{{goods.marketprice}}</b>
            </span>
          </span>
          <span style="margin-left: 10px;font-size: 10px;">
            <s>¥{{goods.productprice}}</s>
          </span>
        </div>
        <div>
          剩余
          <span class="notice_text">{{goods.total - goods.salesreal}}</span>
          {{goods.unit}}
        </div>
      </div>
    </div>
    <hr size="1" style="color: #f0f0f0;border-style:dashed;width:100%">
    <div style="font-size:11px;">
      <span>销售时间：{{goods.timestart | dateTimeFormat}} 至 {{goods.timeend | dateTimeFormat}}</span>
      <span style="float:right;">提货时间：{{pickupTime| dateTimeFormat}}</span>
    </div>
  </div>
</template>

<script>
import item_mix from "@/vue/mixin/item-card";
import { IMAGE_PREFIX } from "@/api/goods";
import get_config from "@/vue/mixin/get-config";

export default {
  name: "item-card-mini",
  mixins: [item_mix, get_config],

  computed: {
    imageUrl() {
      return this.convertImageUrl(this.goods.thumbSquare || this.goods.thumb);
    }
  },

  created() {
    this.getGlobalConfig();
  }
};
</script>

<style lang="scss" scoped>
.foucs_text {
  position: absolute;
  left: 0;
  top: 0;
  background-color: $red;
  color: white;
  border-radius: 0 5px 5px 0;
  padding: 0 2px;
  display: inline-block;
  font-size: 8px;
}
.tagline {
  background-color: $red;
  border-radius: 5px;
  color: white;
  font-size: 10px;
  padding: 1px;
  //   display: inline-block;
}
.name_text {
  margin: 1px 0;
}
.notice_text {
  color: $red;
}

.vip_panel {
  background-color: $red;
  margin-right: 10px;
  color: white;
  border-radius: 5px;
}
</style>
